﻿<html>
  <head>
    <meta name="generator" content="h-smile:richtext"/>
  </head>
<body>
  <h1>Style object</h1>
  <p>Represents style attributes of the DOM <a href="Element.htm">element</a>.</p>
  <p>To access Style object of the element use its <em>style</em> property: element.style</p>
  <p>Note that TIScript supports extended get-by-symbol notation so</p>
  <p><code>el.style[&quot;background-color&quot;] = &quot;red&quot;; // is an equivalent of</code></p>
  <p><code>el.style#background-color = &quot;red&quot;; // extended &quot;symbol&quot; notation</code></p>
  <p>To clear particular CSS attribute value that was set in runtime simply assign <em>undefined</em> value to it:</p>
  <p> <font face="Courier New"><code>el.style#background-color = undefined; // </code></font>clear runtime style attribute - its computed value will be determined by normal CSS cascading process.</p>
  <dl>
    <h2>Properties</h2>
    <dt>[attname]</dt>
    <dd>
      <div><em>string</em>, value of style attribute <em>attname </em>(CSS). В <em>attname </em>here is a string or a symbol. Read-write index accessor.</div>
      <p>See <a href="http://www.terrainformatica.com/htmlayout/cssmap.whtm">list of supported names of CSS attributes</a>.</p>
      <p>To clear value of style attribute assign <em>undefined</em> value to it:</p>
      <p> <font face="Courier New">el.style#background-color = undefined;</font></p></dd>
    
		
		<dt>backgroundImage</dt><dd><i>Image | null</i>, background image if it is defined in CSS.</dd>
		<dt>foregroundImage</dt>
		<dd><i>Image | null</i>, foreground image if it is defined in CSS or behaviors. For the <code>&lt;video&gt;</code> element, it will return image representing current frame.&nbsp;</dd><dt>backgroundImageWidth</dt>
    <dd>
      <div><em>integer</em> | <em>undefined</em>, width in pixels of background image if it is available or <em>undefined</em> if background image is available.</div></dd>
    <dt>backgroundImageHeight</dt>
    <dd>
      <div><em>integer</em> | <em>undefined</em>, height in pixels of background image if it is available or <em>undefined</em> if background image is unavailable.</div></dd>
    <dt>foregroundImageWidth</dt>
    <dd>
      <div><em>integer</em> | <em>undefined</em>, width in pixels of foreground image if it is available or <em>undefined</em> if foreground image is unavailable.</div></dd>
    <dt>foregroundImageHeight</dt>
    <dd>
      <div><em>integer</em> | <em>undefined</em>, height in pixels of foreground image if it is available or <em>undefined</em> if foreground image is unavailable.</div>
			</dd><dt>isDormant</dt>
		<dd>true | false, true if used style of the element has <code>display:none</code> or <code>visibility:none</code> defined - element is excluded from layout and rendering completely.</dd>
    <h2>Methods</h2>
    <dt>clear</dt>
    <dd>
      <div><strong>() </strong>returns: Style</div>
      <p>Clears all attributes previously set by using [attname] accessor for the element or the set() function.</p>
      <p>Returns the style object itself allowing to chain the call with the set()</p></dd>
    <dt>set</dt>
    <dd>
      <div><strong>(</strong> attributes: Object <strong>)</strong> returns: Style</div>
      <p>Sets or clears multiple style attributes on the element. As function accepts single object pareameter then it can be used with &quot;object-call&quot; notation:</p>
      <pre>el.style.set {
   display: &quot;block&quot;,
   width: px(40),
   height: px(20)
};
</pre></dd>
    <dt>cursor</dt>
    <dd><strong>(</strong> img: Image | null [, hotspotX:integer, hotspotY:integer ] &nbsp;<strong>)</strong> returns: Style
      <p>Creates and sets cursor from <em>img</em> and hotspotX/Y coordinates. To reset cursor to its default value use <code>el.style.cursor(null)</code>; &nbsp;</p></dd>
    <dt>rules</dt>
    <dd>
      <div><strong>( ) </strong>returns: Array</div>
      <p>Returns array of style rules applied to the element. Each element of the array is an object of following types:</p>
      <ul>
        <li>{ <em>type</em>: <strong>#style-rule</strong>, <em>selector</em>: &lt;string&gt;, <em>file</em>: &lt;string&gt;, <em>lineNo</em>: integer; } - for the rule defined in CSS;</li>
        <li>{ <em>type</em>: <strong>#inline-style</strong>, <em>text</em>: &lt;string&gt; } - for styles defined by the style=&quot;...&quot; attribute in the DOM;</li>
        <li>{ <em>type</em>: <strong>#runtime-style</strong> } - designates that the element has styles set in runtime through script.</li></ul></dd>
    <dt>all</dt>
    <dd>
      <div><strong>(</strong> <strong>)</strong> returns: Object</div>
      <p>Gathers all style defined style attributes and returns them as an object.</p></dd>
    <dt>constant</dt>
    <dd>
      <div><strong>( </strong><em>name</em>: string | symbol<strong> ) </strong>returns: value | array</div>
      <p>Returns value of CSS constant defined in CSS. It could be single value for the case (CSS):</p>
      <p> <font face="Courier New">@const SINGLE: #ff007f;</font></p>
      <p>or array for the case like:</p>
      <p> <font face="Courier New">@const MULTY: 12px 14px;</font></p></dd>
    <dt>dimension</dt>
    <dd>
      <div>(<em>width</em>: length | int | undefined, <em>height</em>: length | int | undefined [, <em>delayed</em>: false | true] )</div>
      <p>The <em>dimension</em> method is an equivalent of setting these two style attributes:</p>
      <pre>elem.style.width = ... ;
elem.style.height = ... ;
</pre>
      <p>The only difference is when last parameter <em>delayed</em> = <code>true</code> is provided. With it the method changes dimensions of the element immediately and defers remeasurement of children for some later time. It makes sense to use this method if you need to update dimensions of the <em>overflow:auto | scroll</em> element with many children in response of some frequent events like MOUSE_MOVE (E.g. in custom splitter implementation). In this case mutiple MOUSE_MOVEs will end up in only one remeasurement of element's content.</p></dd>
    <dt>documentRules</dt>
    <dd>
      <div>(<em></em>[<em>callback</em>: function] [, <em>filter</em>: object ] ) : integer</div>
      <p>Enumerates CSS rules defined and used by the document. Returns number of rules processed.</p>
      <p>Where:</p>
      <ul>
        <li><em>callback</em> is <code>function( selector, file, lineNo, usageCounter )</code> that receives CSS selector , file URL, line number where the rule is defined and the number of DOM elements that use this rule to the moment of the documentRules() call.</li>
        <li><em>filter</em> is an object that defines enumeration filter and CSS properties accessor callback. The filter object accepts the following optional fields:</li>
        <ul>
          <li><em>selector</em> - string, if defined then the callback will receive only rules having that selector;</li>
          <li><em>file</em> - string, url of CSS file where the rule is defined;</li>
          <li><em>lineNo</em> - integer, line number in CSS file where the rule is defined;</li>
          <li><em>properties</em> - <code>function(props:object) : null | object</code> , properties accessor function, the function will receive CSS properties defined by the rule. If the function returns an object then properties of the CSS rule will be updated by the object properties.</li></ul></ul>
      <p>Therefore the <em>documentRules</em> function can be used as for inspection as for mutation of the CSS rules table associated with the document.</p>
			</dd>
      <dt>variable</dt>
   		<dd>(  <i>varName</i>: string, [<i>varToSet</i>:value] ) : value | undefined<p>The method gets or sets (if <i>varToSet</i> provided) single CSS variable&nbsp;defined on the element.</p></dd><dt>variables</dt>
   		<dd>(  [<i>varsToSet</i>:object] ) : object | undefined<p>The method gets or sets (if <i>varsToSet</i> provided) CSS variables defined on the element.</p></dd></dl>
</body>
</html>